<template>
	<view class="all">
		<view style="width: 100%;height: 60rpx;"></view>
		<view class="count" style="display: flex;align-items: center;justify-content: space-evenly;">
			<view class="operating" @click="pay()">
				<view class="operating_text">付费</view>
			</view>
			<view class="operating" @click="integral()">
				<view class="operating_text">积分兑换</view>
			</view>
			<view class="operating" @click="examine()">
				<view class="operating_text">审核申请</view>
			</view>
		</view>

		<view style="margin-top: 60rpx; display: flex; flex-wrap: wrap;" v-if="paytype == 1">
			<view
				style="width: 30%;height: 400rpx;border: 2px #0B3D6C solid;background-color: #d3dce6;margin-left: 10px;"
				v-for="(item, index) in vipinfo" :key="index">
				<view style="font-size: 22px;font-weight: bold;text-align: center;padding-top: 10px;color: #000;">
					{{ item.name }}
				</view>
				<view style="font-size: 18px;font-weight: bold;text-align: center;padding-top: 10px;color: #000;"
					v-if="pay_status === 1"><text style="color: red;font-size: 22px">{{ item.membership_price }}</text>￥
				</view>
				<view style="font-size: 18px;font-weight: bold;text-align: center;padding-top: 10px;color: #000;"
					v-else-if="pay_status === 3"><text
						style="color: red;font-size: 22px">{{ item.membership_price }}</text>￥</view>
				<view style="font-size: 18px;font-weight: bold;text-align: center;padding-top: 10px;color: #000;"
					v-else><text style="color: red;font-size: 22px">{{ item.membership_score }}</text></view>
				<view style="text-align: center;padding-top: 15px">
					<view class="enlightened" v-if="pay_status === 1" @click="dredge(item.id)">开通</view>
					<view class="enlightened" v-else-if="pay_status === 3" @click="dredge2(item.id)">审核申请</view>
					<view class="enlightened" v-else @click="dredge1(item.id)">积分开通</view>
				</view>
			</view>
		</view>

		<view style="height: 200px;text-align: center;display: flex;justify-content: center;align-items: center;"
			v-if="paytype == 2 && payment_occurrence_type == 2">
			<img :src="payimg" style="width: 200px;height: 200px" alt="" />
		</view>
	</view>
</template>

<script>
	import user from '@/api/user.js';
	import forum from '@/api/forum.js';
	export default {
		data() {
			return {
				type: 1,
				paytype: 0,
				vipinfo: [],
				pay_status: 1,
				payimg: '',
				fid: 0,
				fid_type: '',
				goods_type: '',
				table_name: '',
				intervalId: null,
				payment_occurrence_type: 1,
			}
		},
		onUnload() {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		},
		onLoad() {
			//#ifdef APP||H5
			this.payment_occurrence_type = 2
			//#endif

			//#ifdef MP-WEIXIN
			this.payment_occurrence_type = 1
			//#endif
			this.fid = uni.getStorageSync('fid');
			this.fid_type = uni.getStorageSync('fid_type');
			console.log(this.fid, this.fid_type)
			if (this.fid_type == 'plate') {
				this.type = 2
				this.table_name = 'plate'
				this.goods_type = 'categories'
				this.goods_ids = this.fid
			} else if (this.fid_type == 'album') {
				this.type = 3
				this.table_name = 'video_category'
				this.goods_type = 'categories'
				this.goods_ids = this.fid
			} else if (this.fid_type == 'chart_parent') {
				this.type = 4
				this.table_name = 'chart_parent'
				this.goods_type = 'categories'
				this.goods_ids = this.fid
			} else if (this.fid_type == 'investment_category') {
				this.type = 5
				this.table_name = 'investment_category'
				this.goods_type = 'categories'
				this.goods_ids = this.fid
			} else if (this.fid_type == 'live_category') {
				this.type = 6
				this.table_name = 'live_category'
				this.goods_type = 'categories'
				this.goods_ids = this.fid
			} else if (this.fid_type == 'danAlbum') {
				this.type = 7
				this.table_name = 'album'
				this.goods_type = 'album'
				this.goods_ids = this.fid
			} else if (this.fid_type == 'danlive') {
				this.type = 8
				this.table_name = 'live'
				this.goods_type = 'articles'
				this.goods_ids = this.fid
			} else {
				this.type = 1
			}
			console.log(this.type, this.table_name, this.goods_type, this.goods_ids)
		},
		methods: {
			back(text) {
				clearTimeout(this.intervalId);
				// uni.removeStorageSync('fid');
				// uni.removeStorageSync('fid_type');
				this.goods_ids = 0
				this.table_name = ''
				this.goods_type = ''
				uni.showToast({
					title: text,
					icon: 'success',
					duration: 1000,
					success: function() {
						setTimeout(function() {
							// uni.navigateBack({
							// 	delta: 1,
							// 	success: function() {
							// 		console.log('返回上一个页面成功');
							// 	},
							// 	fail: function(err) {
							// 		console.log('返回上一个页面失败', err);
							// 	}
							// });
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1000);
					}
				})
			},
			examine() {
				clearTimeout(this.intervalId);
				this.paytype = 1
				if (this.type == 1) {
					this.pay_status = 3
					forum.getVipList().then(res => {
						if (res.code === 1) {
							this.vipinfo = res.data
						}
					})
				} else if (this.type == 2 || this.type == 3 || this.type == 4 || this.type == 5 || this.type == 6 || this.type == 7 || this.type == 8) {
					forum.createVip({
						goods_type: this.goods_type,
						table_name: this.table_name,
						goods_id: this.goods_ids,
						pay_type: 3,
					}).then(res => {
						if (res.code === 1) {
							this.back('申请成功')
						}
					})
				}
			},
			dredge2(id) {
				forum.createVip({
					goods_type: 'user_group',
					table_name: 'user_group',
					goods_id: id,
					pay_type: 3,
				}).then(res => {
					if (res.code === 1) {
						this.back('申请成功')
					}
				})
			},
			integral() {
				clearTimeout(this.intervalId);
				this.paytype = 1
				if (this.type == 1) {
					this.pay_status = 2
					forum.getVipList().then(res => {
						if (res.code === 1) {
							this.vipinfo = res.data
						}
					})
				} else if (this.type == 2 || this.type == 3 || this.type == 4 || this.type == 5 || this.type == 6 || this
					.type == 7 || this.type == 8) {
					this.pay_status = 2
					forum.goodsShow({
						goods_type: this.goods_type,
						table_name: this.table_name,
						goods_id: this.goods_ids,
					}).then(res => {
						if (res.code === 1) {
							this.vipinfo = res.data
							if (res.data[0].name == '购买当前栏目' && this.type == 8) {
								this.goods_ids = res.data[0].goods_id
								this.table_name = 'live_category'
								this.goods_type = 'categories'
							}
						}
					})
				}
			},
			dredge1(id) {
				if (this.type == 1) {
					forum.createVip({
						goods_type: 'user_group',
						table_name: 'user_group',
						goods_id: id,
						pay_type: 2,
					}).then(res => {
						if (res.code === 1) {
							forum.scorePay({
								order_id: res.data.order_id
							}).then(res1 => {
								if (res1.code === 1) {
									this.back('开通成功')
								}
							})
						}
					})
				} else if (this.type == 2 || this.type == 3 || this.type == 4 || this.type == 5 || this.type == 6 || this
					.type == 7 || this.type == 8) {
					forum.createVip({
						goods_type: this.goods_type,
						table_name: this.table_name,
						goods_id: this.goods_ids,
						pay_type: 2,
					}).then(res => {
						if (res.code === 1) {
							forum.scorePay({
								order_id: res.data.order_id
							}).then(res1 => {
								if (res1.code === 1) {
									this.back('开通成功')
								}
							})
						}
					})
				}

			},
			pay() {
				this.paytype = 1
				if (this.type == 1) {
					this.pay_status = 1
					forum.getVipList().then(res => {
						if (res.code === 1) {
							this.vipinfo = res.data
						}
					})
				} else if (this.type == 2 || this.type == 3 || this.type == 4 || this.type == 5 || this.type == 6 || this
					.type == 7 || this.type == 8) {
					this.pay_status = 1
					forum.goodsShow({
						goods_type: this.goods_type,
						table_name: this.table_name,
						goods_id: this.goods_ids,
					}).then(res => {
						if (res.code === 1) {
							this.vipinfo = res.data
							if (res.data[0].name == '购买当前栏目' && this.type == 8) {
								this.goods_ids = res.data[0].goods_id
								this.table_name = 'live_category'
								this.goods_type = 'categories'
							}
						}
					})
				}
			},
			dredge(id) {
				if (this.type == 1) {
					if (this.payment_occurrence_type === 2) {
						forum.createVip({
							goods_type: 'user_group',
							table_name: 'user_group',
							goods_id: id,
							pay_type: 1,
						}).then(res => {
							if (res.code === 1) {
								forum.payVip({
									order_id: res.data.order_id,
								}).then(res1 => {
									if (res1.code === 1) {
										this.payimg = res1.data.code_url
										this.paytype = 2
										this.intervalId = setInterval(() => {
											forum.Vipquery({
												order_id: res.data.order_id
											}).then(res2 => {
												if (res2.code === 1) {
													if (res2.data.pay_status === 1) {
														clearInterval(intervalId); // 停止轮询
														this.back('开通成功')
													}
												}
											});
										}, 6000);
									}
								})
							}
						})
					} else {
						forum.createVip({
							goods_type: 'user_group',
							table_name: 'user_group',
							goods_id: id,
							pay_type: 5,
						}).then(res => {
							if (res.code === 1) {
								user.wechatMiniPay({
									order_id: res.data.order_id
								}).then(res => {
									console.log(res)
									uni.requestPayment({
										provider: 'wxpay', // 使用微信支付
										timeStamp: res.time, // 时间戳，替换为你的时间戳
										nonceStr: res.data.nonceStr, // 随机字符串，替换为你的随机字符串
										package: res.data.package, // 支付参数中的package值
										signType: 'MD5', // 签名类型
										paySign: res.data.paySign, // 签名值
										success: function(res) {
											console.log('支付成功', res)
											// 在支付成功后，可以进行相关的操作，例如跳转到支付成功页面
											uni.navigateTo({
												url: '/pages/index/myinfo'
											})
										},
										fail: function(error) {
											console.error('支付失败', error)
											// 在支付失败后，可以进行相关的操作，例如跳转到支付失败页面
											uni.navigateTo({
												url: '/pages/membership/membership'
											})
										}
									})
								})
							}
						})
					}
				} else if (this.type == 2 || this.type == 3 || this.type == 4 || this.type == 5 || this.type == 6 || this
					.type == 7 || this.type == 8) {
					if (this.payment_occurrence_type === 2) {
						forum.createVip({
							goods_type: this.goods_type,
							table_name: this.table_name,
							goods_id: this.goods_ids,
							pay_type: 1,
						}).then(res => {
							if (res.code === 1) {
								forum.payVip({
									order_id: res.data.order_id
								}).then(res1 => {
									if (res1.code === 1) {
										this.payimg = res1.data.code_url
										this.paytype = 2
										const intervalId = setInterval(() => {
											forum.Vipquery({
												order_id: res.data.order_id
											}).then(res2 => {
												if (res2.code === 1) {
													if (res2.data.pay_status === 1) {
														clearInterval(intervalId); // 停止轮询
														this.back('开通成功')
													}
												}
											});
										}, 6000);
									}
								})
							}
						})
					} else {
						forum.createVip({
							goods_type: this.goods_type,
							table_name: this.table_name,
							goods_id: this.goods_ids,
							pay_type: 5,
						}).then(res => {
							if (res.code === 1) {
								user.wechatMiniPay({
									order_id: res.data.order_id
								}).then(res => {
									console.log(res)
									uni.requestPayment({
										provider: 'wxpay', // 使用微信支付
										timeStamp: res.time, // 时间戳，替换为你的时间戳
										nonceStr: res.data.nonceStr, // 随机字符串，替换为你的随机字符串
										package: res.data.package, // 支付参数中的package值
										signType: 'MD5', // 签名类型
										paySign: res.data.paySign, // 签名值
										success: function(res) {
											console.log('支付成功', res)
											// 在支付成功后，可以进行相关的操作，例如跳转到支付成功页面
											uni.navigateTo({
												url: '/pages/index/index'
											})
										},
										fail: function(error) {
											console.error('支付失败', error)
											// 在支付失败后，可以进行相关的操作，例如跳转到支付失败页面
											uni.navigateTo({
												url: '/pages/membership/membership'
											})
										}
									})
								})
							}
						})
					}
				}
			}
		}
	}
</script>

<style>
	.all {
		width: 100%;
		height: 100vh;
		background-color: #112858;
	}

	.count {
		width: 92%;
		height: 190rpx;
		background: #0D4283;
		margin: auto;
		border-radius: 16rpx;
	}

	.operating {
		width: 20%;
		color: #fff;
		border: 2rpx #ccc solid;
		border-radius: 16rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		cursor: pointer;
	}

	.operating_text {
		text-align: center;
		font-size: 30rpx;
		padding: 10rpx;
		width: 100%;
	}

	.enlightened {
		border: 3rpx #4f84e6 solid;
		width: 70%;
		padding: 10rpx;
		margin: auto;
		border-radius: 10rpx;
	}
</style>